import React, { Component } from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import { Row, Col, Icon } from 'antd'
import EditStatusBox from './assignment/edit-status-box'
import CommentBox from './assignment/comment-box'
import OnlineLanguage from './assignment/online-language-quiz'
import * as actions from '../actions/online-language'
import { studentGetSectionComments } from '../actions/comment'
import { getReviewOnlineCodingQuiz } from '../actions/reviewQuiz'
import { FormattedMessage } from 'react-intl'
import {getLangFromLocalStorage} from '../constant/lang-util'

class ExcellentAssignmentPageBody extends Component {
  constructor (props) {
    super(props)
    this.state = {
      programId: 0,
      taskId: 0,
      assignmentId: 0,
      quizId: 0
    }
  }

  componentDidMount () {
    const { assignmentId, taskId, quizId } = this.props.match.params
    this.props.getOnlineLanguageQuizzes(assignmentId)
    this.props.getTask(taskId)
    this.setState({quizId, assignmentId, taskId})
    if (quizId) {
      this.props.getReviewQuiz(assignmentId, quizId)
      this.props.getComments(assignmentId, quizId)
    }
  }

  render () {
    const { taskId, assignmentId, quizId } = this.state
    const { review, quizzes, task, comments } = this.props
    const quiz = quizzes.find(quiz1 => quiz1.id === parseInt(quizId)) || {}
    const assignment = task.assignments.find(assignment => assignment.id === parseInt(assignmentId)) || {}
    const lang = getLangFromLocalStorage()

    return <div>
      <div className='bottom-line padding-b-2'>
        <Row gutter={4}>
          <Col span={5} offset={1}>
            <h1>{assignment[`title_${lang}`] || assignment.title}</h1>
          </Col>
        </Row>
      </div>
      <Row className='margin-t-2'>
        <Col offset={1} span={20}>
          <div className='bottom-line padding-b-2'>
            <Row gutter={4}>
              <Col span={5}>
                <h2>{quiz[`onlineLanguageName_${lang}`] || quiz.onlineLanguageName }</h2>
              </Col>
              <Col span={4} />
              <Col span={6} offset={6}>
                <EditStatusBox
                  disable
                  review={review}
                  updateReviewQuiz={this.props.updateReviewQuiz}
                  assignmentId={assignmentId}
                  quizId={quiz.id} />
              </Col>
            </Row>
          </div>
          <div className='margin-t-2'>
            <a onClick={() => window.history.back()}><Icon type='arrow-left' />
              <FormattedMessage id='返回优秀作业' />
            </a >
          </div>

          {
            quiz.id
              ? <OnlineLanguage
                preview
                finished
                runningLogs=''
                quiz={quiz}
                taskId={taskId}
                assignmentId={assignmentId}
                 />
              : ''
          }
          <CommentBox comments={comments} sectionId={this.state.assignmentId} studentId={this.state.studentId} />
        </Col>
      </Row>
    </div>
  }
}

const mapStateToProps = ({ onlineLanguageQuizzes, review, comments, task, runningLogs }) => {
  return {
    review,
    quizzes: onlineLanguageQuizzes,
    task,
    comments
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    getOnlineLanguageQuizzes: (assignmentId, studentId) => dispatch(actions.getOnlineLanguageQuizzes(assignmentId, studentId)),
    getReviewQuiz: (assignmentId, quizId) => dispatch(getReviewOnlineCodingQuiz(assignmentId, quizId)),
    getComments: (assignmentId, quizId) => dispatch(studentGetSectionComments(assignmentId, quizId)),
    getTask: (taskId) => dispatch(actions.getTask(taskId))
  }
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(ExcellentAssignmentPageBody))
